<template>
	<view class="records" :style="{ paddingTop: StatusBar + 'px' }">
		<view class="records_header">
			<view class="header_back" @click="navigateBack()">
				<text class="iconfont icon-Left"></text>
			</view>
			<view class="header_title">投诉服务</view>
			<view class="header_btn" @click="navigateTo('complaint_service')">
				<text class="iconfont icon-jilu"></text>
				<text class="btn_text">投诉记录</text>
			</view>
		</view>
		<view class="records_">
			
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			textList: []
		};
	},
	methods: {}
};
</script>

<style>
page {
	background: #F7F8FA;
}
</style>
<style lang="scss" scoped>
.records {
	background: url(~@/static/complaint_records/nav.png) no-repeat;
	background-size: 528rpx 436rpx;
	background-position: 222rpx 0;
	.records_header {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		position: relative;
		font-weight: bold;
		.header_back {
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header_title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.header_btn {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #22150b;
			.iconfont {
				font-size: 40rpx;
			}
			.btn_text {
				margin-top: 4rpx;
				font-size: 24rpx;
			}
		}
	}
}

</style>
